/* 页面外观设置标签
 * PageSurfaceTab.jsx
 */
 import React, { Component, PropTypes } from 'react';

import {upCompAttr,upCompSurface,upCompAnimation,upCompEvent} from '../../../actions/h5/ComponentAction';
import {updatePageAttr} from '../../../actions/h5/PageAction';
import {listMusic,listImage,listFile,clearPageIdArr} from '../../../actions/FileHandleAction';
import {upH5Attr} from '../../../actions/h5/H5Action';

import {FONTS,ANIMATIONS} from '../../../utils/H5constants';
import UploadComponent from '../../../components/UploadComponent.jsx';
import {getImageWH} from '../../../utils/H5helper';

 class PageSurface extends Component{
	constructor(props){
		super(props);
		this.imgListProps={category:2,row:2,col:5};
	}

	componentDidMount(){
		$('.bgImgBtn').popup({
			position:'bottom center',
    		popup : $('#bgImgPopup'),
    		on   : 'click'
  		});
  		$(".bgMusicBtn").popup({
			position:'bottom center',
    		popup : $('#bgMusicPopup'),
    		on   : 'click'
  		});
  		$(".loadingPageBtn").popup({
			position:'left center',
    		popup : $('#loadingPagePopup'),
    		on   : 'click'
  		});

  	}
  	//查询图片列表
  	imgList(){
  		this.props.dispatch(listImage(null,null,10));
  		this.props.dispatch(clearPageIdArr());
  	}
  	//查询音乐列表
  	musicList(){
  		this.props.dispatch(listMusic(null,null,10));//加载服务器的音乐
  		this.props.dispatch(clearPageIdArr());
  	}

  	//查询文件列表
  	fileList(){
  		this.props.dispatch(listFile(null,null,10));
  		this.props.dispatch(clearPageIdArr());
  	}

	editPageAttribute(name,value){
		this.props.dispatch(updatePageAttr(this.props.page.get('id'),{[name]:value}));
	}

	delPageBackground(){
		this.props.dispatch(updatePageAttr(this.props.page.get('id'),{bgName:'',background:''}));
	}

	delBackMusic(){
		this.props.dispatch(upH5Attr('bgMusicName',''));
		this.props.dispatch(upH5Attr('bgMusicUrl',''));
	}

	delLoadingPage(){
		this.props.dispatch(upH5Attr('loadingPageName',''));
		this.props.dispatch(upH5Attr('loadingPageUrl',''));
	}

	imgClick(src,imgName){
		const bg="url("+src+") center center no-repeat";
		this.props.dispatch(updatePageAttr(this.props.page.get('id'),{bgName:imgName,background:bg}));
		$(".bgImgBtn").popup("hide");
	}

	chooseMusicClick(src,name){
		this.props.dispatch(upH5Attr('bgMusicName',name));
		this.props.dispatch(upH5Attr('bgMusicUrl',src));
		$(".bgMusicBtn").popup("hide");
	}

	chooseLoadClick(src,name){
		this.props.dispatch(upH5Attr('loadingPageName',name));
		this.props.dispatch(upH5Attr('loadingPageUrl',src));
		$(".loadingPageBtn").popup("hide");
	}

	backColorSet(value){
		//this.editPageAttribute('background',value);
		this.props.dispatch(updatePageAttr(this.props.page.get('id'),{bgName:value,background:value}));
	}

	render(){
		const attributes=this.props.page.get('attributes');
		const upCompProps={//上传组件的属性
			width:530,
			height:350,
			showTabs:['image'],//显示的标签页
			imgClick:this.imgClick.bind(this),//设置图片点击事件
			multiple:false   //是否允许多个文件同时上传
		};
		const musicUpCompProps={//上传组件的属性
			width:530,
			height:350,
			showTabs:['music'],//显示的标签页
			musicItemClick:this.chooseMusicClick.bind(this),//设置点击事件
			multiple:false   //是否允许多个文件同时上传
		};
		const loadUpCompProps={
			width:530,
			height:350,
			showTabs:['image'],//显示的标签页
			imgClick:this.chooseLoadClick.bind(this),//设置点击事件
			multiple:false   //是否允许多个文件同时上传
		}
		return(
			<div className="panel-group">
				<h4 className="ui header">页面配置</h4>
				<div className="ui toggle checkbox h5-labeled-input">
				  <input type="checkbox" checked={attributes.get('swipeForbidden')} onChange={()=>{this.editPageAttribute('swipeForbidden',!attributes.get('swipeForbidden'))}}/>
				  <label>当页禁止滑动</label>
				</div>
				<div className="ui divider"></div>
				<div className="input-group">
					<h4 className="ui header">页面背景</h4>
					<div className="ui action input h5-labeled-input">
					  <input  type="text" disabled={true} value={attributes.get('bgName')} style={{width:150}}/>
					  <button className="ui icon button bgImgBtn" onClick={this.imgList.bind(this)}><i className="file image outline icon"></i></button>
					  <button className="ui icon button" onClick={()=>this.delPageBackground()}><i className="trash icon"></i></button>
					</div>
					<div style={{display:'inline-flex'}}>
						<input type="color" value={attributes.get('background')} onChange={(e)=>{this.backColorSet(e.target.value)}} />
					</div>
				</div>
				
				<div className="input-group">
					<span className="input-group-addon">背景透明度</span>
					<span className="input-group-addon ranger">
						<input type="range" step="0.05" value={attributes.get('backgroundOpacity')} min="0" max="1" onChange={(e)=>{this.editPageAttribute('backgroundOpacity',e.target.value)}} />
					</span>
					<input type="number" className="form-control input-sm" step="0.05" min="0" max="1" value={attributes.get('backgroundOpacity')} onChange={(e)=>{this.editPageAttribute('backgroundOpacity',e.target.value)}} />
				</div>

				<div className="ui divider"></div>
				<h4 className="ui header">背景音乐</h4>
				<div className="ui action input h5-labeled-input">
				  <input  type="text" disabled={true} value={this.props.h5Data.attributes.bgMusicName} style={{width:150}}/>
				  <button className="ui icon button bgMusicBtn" onClick={this.musicList.bind(this)}><i className="music icon"></i></button>
				  <button className="ui icon button" onClick={()=>this.delBackMusic()}><i className="trash icon"></i></button>
				</div>
				<div className="ui divider"></div>
				<h4 className="ui header">设置加载页</h4>
				<div className="ui action input h5-labeled-input">
				  <input  type="text" disabled={true} value={this.props.h5Data.attributes.loadingPageName} style={{width:150}}/>
				  <button className="ui icon button loadingPageBtn" onClick={this.imgList.bind(this)}><i className="archive icon"></i></button>
				  <button className="ui icon button" onClick={()=>this.delLoadingPage()}><i className="trash icon"></i></button>
				</div>
				<div id="bgImgPopup" className="ui custom popup">
					<UploadComponent {...upCompProps} />
				</div>
				<div id="bgMusicPopup" className="ui custom popup">
					<UploadComponent {...musicUpCompProps} />
				</div>
				<div id="loadingPagePopup" className="ui custom popup">
					<UploadComponent {...loadUpCompProps} />
				</div>
			</div>
		);
	}
}

export default PageSurface;